<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>ADB端口扫描工具</title>
  <style>
    body { font-family: Arial, sans-serif; }
    #ip-list { margin-top: 20px; }
    .ip { padding: 5px 10px; border: 1px solid #ddd; margin-bottom: 5px; }
    .open { background-color: #d4edda; }
    button { padding: 10px 20px; font-size: 16px; cursor: pointer; }
    #elapsed-time { margin-top: 20px; font-weight: bold; }
  </style>
</head>
<body>
  <p></span>扫描所有可以远程连接adb的设备. </span><span id="cp-ip">点击设备复制IP</span></p>
  
  <!-- 扫描按钮 -->
  <button id="startScanBtn">重新扫描</button>

  <div id="ip-list"></div>
  <div id="elapsed-time"></div> <!-- 显示扫描耗时 -->

  <script>
    function copyToClipboard(text) {
        // 检查是否支持Clipboard API
        if (navigator.clipboard && window.isSecureContext) {
            // 使用Clipboard API复制文本
            navigator.clipboard.writeText(text).then(function() {
                console.log('复制到剪贴板 ' + text);
                document.getElementById('cp-ip').innerHTML = '已复制 ' + text;
            }, function(err) {
                console.error('复制文本到剪贴板时发生错误', err);
            });
        } else {
            // 对于不支持Clipboard API的浏览器，可以使用旧的document.execCommand方法
            var textArea = document.createElement("textarea");
            textArea.value = text;
            // 避免滚动条出现
            document.body.appendChild(textArea);
            textArea.focus();
            textArea.select();
    
            try {
                var successful = document.execCommand('copy');
                var msg = successful ? '成功' : '失败';
                console.log('已复制到剪贴板 ' + text);
                document.getElementById('cp-ip').innerHTML = '已复制 ' + text;
            } catch (err) {
                console.error('复制文本到剪贴板时发生错误', err);
            }
    
            document.body.removeChild(textArea);
        }
    }

    function connectToServer() {
      const ws = new WebSocket('ws://192.168.9.81:3005');

      // 监听 WebSocket 连接成功
      ws.addEventListener('open', () => {
        console.log('WebSocket connection established');
        document.getElementById('startScanBtn').innerHTML = "重新扫描";
        document.getElementById('startScanBtn').disabled = false;
      });

      ws.addEventListener('message', (event) => {
        const data = JSON.parse(event.data);
        console.log('get message:' + event.data);
        if (data.ip) {
          const ipListDiv = document.getElementById('ip-list');
          const ipElement = document.createElement('div');
          ipElement.className = 'ip open';
          ipElement.textContent = `IP: ${data.ip} - ${data.deviceName}`;
          ipListDiv.appendChild(ipElement);
          ipElement.addEventListener('click', () => {
            copyToClipboard("adb connect " + data.ip);
          });
        } else if (data.elapsedTime) {
          const elapsedTimeDiv = document.getElementById('elapsed-time');
          elapsedTimeDiv.textContent = `最近扫描时间 ${data.updateTime}, 耗时 ${data.elapsedTime/1000} s, ${data.clients} clients. `;
          // 恢复按钮可用
          document.getElementById('startScanBtn').innerHTML = "重新扫描";
          document.getElementById('startScanBtn').disabled = false;
        } else if (data.reset) {
          document.getElementById('ip-list').innerHTML = "";
          document.getElementById('startScanBtn').innerHTML = "正在扫描中...";
          document.getElementById('startScanBtn').disabled = true; // 禁用按钮，防止重复点击
        }
      });

      ws.addEventListener('close', () => {
        console.log('WebSocket connection close');
        document.getElementById('startScanBtn').innerHTML = "连接服务器...";
        document.getElementById('startScanBtn').disabled = false;
        setTimeout(connectToServer, 3000);
      });

      // 当点击按钮时，发送扫描请求
      document.getElementById('startScanBtn').addEventListener('click', () => {
        // 向后端发送开始扫描的请求
        if (ws.readyState === WebSocket.OPEN) {
          // 向服务端发送扫描开始的消息
          ws.send('start_scan');
          const ipListDiv = document.getElementById('ip-list');
          document.getElementById('startScanBtn').innerHTML = "正在扫描中...";
          document.getElementById('startScanBtn').disabled = true; // 禁用按钮，防止重复点击
        }
      });
    }

    connectToServer();
  </script>
</body>
</html>
